<template>
    <div class="login-box">
      <div class="login-form">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="passWord">
            <el-input v-model="form.passWord" type="password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        form: {
          userName: 'admin',
          passWord: '******'
        },
        rules: {
          userName: [
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 2 到 5 个字符',
              trigger: 'blur'
            }
          ],
          passWord: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '长度在 6 到 18 个字符',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var $this=this;
            this.$http.post("http://localhost:8080/login",null,{
              params:{
                userName:$this.form.userName,
                passWord:$this.form.passWord
              }
            }).then(function (response) {
              if(response.data!=""){
                $this.$message({
                  showClose: true,
                  message: '登录成功,恭喜你！！！',
                  type: 'success'
                });
                /*路由传值及跳转页面*/
                $this.$router.push({
                  params:{loginName:$this.form.userName},
                  name:'Main'
                })
              }else{
                $this.$message({
                  showClose: true,
                  message: '账号或密码输入有误，请重新输入',
                  type: 'error'
                });

              }
            }).catch(function (error) {
              $this.$message.error('登录失败'+error.message);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
  .login-box{
      height: 700px;
      background-image: url("../assets/mn.jpg");
      background-size: 760px;
  }
  .login-form{
    width: 500px;
    height: 300px;
    position: relative;
    left: 50%;
    top: 50%;
    right: 50%;
    transform: translate(-50%,-50%);
  }
</style>
